<template>
  <div class="z-filter-item" :class="{ 'z-value': isValue }" :style="{ width: width }">
    <z-filter-block
      :input="input"
      :key="`${input.name}_block`"
      v-bind="$attrs"
      @focus="onFocus"
      @blur="onBlur"
    />
    <span class="z-lable">{{ input.label }}</span>
  </div>
</template>

<script>
import ZFilterBlock from "./ZFilterBlock.vue";

export default {
  name: "ZFilterItem",
  components: {
    ZFilterBlock,
  },
  props: {
    input: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    width({ input }) {
      return input.width ? input.width + "px" : "222px";
    },
    isValue({ input }) {
      if (input.multiple && input.value.length) {
        return true;
      }
      if (input.value || input.showKlabel || input.value === 0) {
        return true;
      }
      return false;
    },
  },
  watch: {
    "input.value"(n, o) {
      if (n != o) {
        this.input.onChange?.(n);
      }
    },
  },
  methods: {
    onFocus(event) {
      this.input.onFocus?.(event);
    },
    onBlur(event) {
      this.input.onChange?.(event);
    },
  },
};
</script>

<style lang="scss" scoped>
.z-filter-item {
  position: relative;
  margin-right: 24px;
  margin-bottom: 14px;

  .z-lable {
    position: absolute;
    top: 6px;
    left: 13px;
    z-index: 2;
    padding: 0 2px;
    font-size: 14px;
    color: #a8abb2;
    pointer-events: none;
    transition: all 0.2s;
  }

  &:focus-within .z-lable,
  &.z-value .z-lable {
    top: -15px;
    left: 9px;
    color: #409eff;
    background-color: #fff;
  }
}
</style>
